<template>
  <div id="index2">
    <div class="container" style="height: 100vh; border: 1px solid #eee">
      <div class="main-container">
        <main class="main">
          <router-view></router-view>
            <div class="section">
                <h1 style="text-align: center">在校生报到系统</h1>
                <p>欢迎使用在校生缴费系统！本系统旨在为在校学生提供便捷的缴费服务。以下是本系统的主要功能介绍：</p>
            </div>
            <div class="section">
                <h2>主要功能</h2>
                <ol>
                    <li><strong>网上缴费</strong><br>学生可以通过系统在线缴纳学费、住宿费和代收费等各种费用。</li>
                    <li><strong>现场缴费</strong><br>对于不方便在线支付的学生，可以选择到校现场缴费。</li>
                    <li><strong>表单查询</strong><br>管理者可以通过系统查询各类缴费记录和表单</li>
                </ol>
            </div>
            <div class="section">
                <p>希望本系统能为您的学习和工作提供帮助。如有任何疑问或建议，请联系学校教材管理部门。</p>
            </div>
        </main>
      </div>
    </div>
  </div>
</template>

<script>
import myMenu2 from '@/components/myMenu2.vue';

export default {
  name: 'index2',
  components: {
    myMenu2,
  }
};
</script>

<style scoped>
/* Index2 Page Styles */
a {
  text-decoration: none;
}

/* Main Container Styles */
.container {
  display: flex;
  height: 100vh;
  border: 1px solid #eee;
}
/* Main Content Styles */
.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Main Area Styles */
.main {
    margin-top:20px;
    justify-content: center;
    width: 80%;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

</style>